<script setup>
import { ref, onMounted, onUnmounted, computed } from 'vue';
import { useRouter } from 'vue-router';
import { 
  carouselImages, 
  cityIntro, 
  attractions, 
  foods, 
  culturalExperiences, 
  travelGuides 
} from '../data/mockData.js';

const router = useRouter();
const currentSlide = ref(0);
const slideInterval = ref(null);
const isPaused = ref(false);

// 初始化轮播图自动播放
onMounted(() => {
  startSlideInterval();
});

// 清理定时器
onUnmounted(() => {
  if (slideInterval.value) {
    clearInterval(slideInterval.value);
  }
});

// 开始轮播定时器
const startSlideInterval = () => {
  slideInterval.value = setInterval(() => {
    if (!isPaused.value) {
      nextSlide();
    }
  }, 5000);
};

// 下一张幻灯片
const nextSlide = () => {
  currentSlide.value = (currentSlide.value + 1) % carouselImages.length;
};

// 上一张幻灯片
const prevSlide = () => {
  currentSlide.value = (currentSlide.value - 1 + carouselImages.length) % carouselImages.length;
};

// 跳转到指定幻灯片
const goToSlide = (index) => {
  currentSlide.value = index;
};

// 暂停轮播
const pauseSlide = () => {
  isPaused.value = true;
};

// 恢复轮播
const resumeSlide = () => {
  isPaused.value = false;
};

// 查看景点详情
const viewAttractionDetail = (id) => {
  // 未来可以实现景点详情页，现在先模拟
  alert(`查看景点ID: ${id} 的详情`);
};

// 导航到完整页面
const navigateToPage = (path) => {
  router.push(path);
};

// 模拟搜索功能
const searchQuery = ref('');
const search = () => {
  if (searchQuery.value.trim()) {
    alert(`搜索: ${searchQuery.value}`);
    // 未来可以实现真正的搜索功能
    searchQuery.value = '';
  }
};

// 获取景点分类
const getAttractionCategories = () => {
  const categories = new Set();
  attractions.forEach(attraction => {
    categories.add(attraction.category);
  });
  return Array.from(categories);
};

const attractionCategories = getAttractionCategories();
const selectedCategory = ref('全部');

// 根据分类筛选景点
const filteredAttractions = () => {
  if (selectedCategory.value === '全部') {
    return attractions;
  }
  return attractions.filter(attraction => attraction.category === selectedCategory.value);
};
</script>

<template>
  <div class="home-page">
    <!-- 轮播图区域 -->
    <section class="carousel-section">
      <div 
        class="carousel" 
        @mouseenter="pauseSlide" 
        @mouseleave="resumeSlide"
      >
        <div 
          v-for="(item, index) in carouselImages" 
          :key="item.id"
          class="carousel-item"
          :class="{ active: currentSlide === index }"
        >
          <img :src="item.image" :alt="item.title" class="carousel-image">
          <div class="carousel-caption">
            <h3 class="carousel-title">{{ item.title }}</h3>
            <p class="carousel-subtitle">{{ item.subtitle }}</p>
            <button 
              class="carousel-btn" 
              @click="navigateToPage('/attractions')"
            >
              立即探索
            </button>
          </div>
        </div>
        
        <!-- 轮播控制按钮 -->
        <div class="carousel-controls">
          <button class="carousel-control prev" @click="prevSlide">
            ‹
          </button>
          <button class="carousel-control next" @click="nextSlide">
            ›
          </button>
        </div>
        
        <!-- 轮播指示器 -->
        <div class="carousel-indicators">
          <button 
            v-for="(item, index) in carouselImages" 
            :key="item.id"
            class="carousel-indicator"
            :class="{ active: currentSlide === index }"
            @click="goToSlide(index)"
          ></button>
        </div>
      </div>
    </section>
    
    <!-- 搜索区域 -->
    <section class="search-section">
      <div class="container">
        <div class="search-box">
          <div class="search-input-wrapper">
            <input 
              type="text" 
              v-model="searchQuery" 
              class="search-input"
              placeholder="搜索景点、美食、文化体验..."
              @keyup.enter="search"
            >
            <button class="search-btn" @click="search">
              🔍 搜索
            </button>
          </div>
          <div class="search-tags">
            <span class="search-tag" @click="() => { searchQuery = '刘公岛'; search(); }">
              # 刘公岛
            </span>
            <span class="search-tag" @click="() => { searchQuery = '成山头'; search(); }">
              # 成山头
            </span>
            <span class="search-tag" @click="() => { searchQuery = '海鲜'; search(); }">
              # 海鲜美食
            </span>
            <span class="search-tag" @click="() => { searchQuery = '海水浴场'; search(); }">
              # 海水浴场
            </span>
          </div>
        </div>
      </div>
    </section>
    
    <!-- 城市介绍区域 -->
    <section class="city-intro-section">
      <div class="container">
        <div class="section-header">
          <h2 class="section-title">🏙️ 威海简介</h2>
          <button class="view-more-btn" @click="navigateToPage('/city-intro')">
            查看更多 ›
          </button>
        </div>
        
        <div class="city-intro-content">
          <div class="city-intro-text">
            <p class="intro-paragraph">
              {{ cityIntro.history }}
            </p>
            <p class="intro-paragraph">
              {{ cityIntro.geography }}
            </p>
            <p class="intro-paragraph">
              {{ cityIntro.climate }}
            </p>
          </div>
          <div class="city-intro-images">
            <div class="intro-image-wrapper" v-for="(img, index) in cityIntro.images" :key="index">
              <img :src="img" :alt="`威海景色${index + 1}`" class="intro-image">
            </div>
          </div>
        </div>
      </div>
    </section>
    
    <!-- 热门景点区域 -->
    <section class="attractions-section">
      <div class="container">
        <div class="section-header">
          <h2 class="section-title">🏞️ 热门景点</h2>
          <button class="view-more-btn" @click="navigateToPage('/attractions')">
            查看更多 ›
          </button>
        </div>
        
        <!-- 景点分类筛选 -->
        <div class="attraction-categories">
          <button 
            v-for="category in ['全部', ...attractionCategories]" 
            :key="category"
            class="category-btn"
            :class="{ active: selectedCategory === category }"
            @click="selectedCategory = category"
          >
            {{ category }}
          </button>
        </div>
        
        <!-- 景点列表 -->
        <div class="attractions-grid">
          <div 
            v-for="attraction in filteredAttractions()" 
            :key="attraction.id"
            class="attraction-card"
            @click="viewAttractionDetail(attraction.id)"
          >
            <div class="attraction-image-wrapper img-hover">
              <img 
                :src="attraction.image" 
                :alt="attraction.name" 
                class="attraction-image"
              >
              <div class="attraction-overlay overlay">
                <h3 class="attraction-name-overlay">{{ attraction.name }}</h3>
                <div class="attraction-rating">
                  <span class="stars">
                    ★★★★★
                  </span>
                  <span class="rating-number">{{ attraction.rating }}</span>
                </div>
              </div>
            </div>
            <div class="attraction-info">
              <div class="attraction-header">
                <h3 class="attraction-name">{{ attraction.name }}</h3>
                <div class="attraction-tags">
                  <span class="tag tag-primary">{{ attraction.category }}</span>
                  <span class="tag tag-secondary">{{ attraction.area }}</span>
                </div>
              </div>
              <p class="attraction-description">{{ attraction.description }}</p>
              <div class="attraction-footer">
                <div class="attraction-price">
                  <span class="price-label">门票：</span>
                  <span class="price-value">{{ attraction.ticketPrice }}</span>
                </div>
                <button class="view-detail-btn">
                  查看详情 ›
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    
    <!-- 特色美食区域 -->
    <section class="food-section">
      <div class="container">
        <div class="section-header">
          <h2 class="section-title">🍽️ 特色美食</h2>
          <button class="view-more-btn" @click="navigateToPage('/food')">
            查看更多 ›
          </button>
        </div>
        
        <div class="food-grid">
          <div 
            v-for="food in foods" 
            :key="food.id"
            class="food-card"
          >
            <div class="food-image-wrapper img-hover">
              <img 
                :src="food.image" 
                :alt="food.name" 
                class="food-image"
              >
              <div class="food-overlay overlay">
                <h3 class="food-name-overlay">{{ food.name }}</h3>
              </div>
            </div>
            <div class="food-info">
              <h3 class="food-name">{{ food.name }}</h3>
              <p class="food-description">{{ food.description }}</p>
              <div class="food-recommended">
                <span class="recommended-label">推荐：</span>
                <span 
                  v-for="(item, index) in food.recommended" 
                  :key="index"
                  class="recommended-item"
                >
                  {{ item }}
                  <span v-if="index < food.recommended.length - 1">、</span>
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    
    <!-- 文化体验区域 -->
    <section class="culture-section">
      <div class="container">
        <div class="section-header">
          <h2 class="section-title">🎭 文化体验</h2>
          <button class="view-more-btn" @click="navigateToPage('/culture')">
            查看更多 ›
          </button>
        </div>
        
        <div class="culture-grid">
          <div 
            v-for="culture in culturalExperiences" 
            :key="culture.id"
            class="culture-card"
          >
            <div class="culture-image-wrapper img-hover">
              <img 
                :src="culture.image" 
                :alt="culture.name" 
                class="culture-image"
              >
              <div class="culture-overlay overlay">
                <h3 class="culture-name-overlay">{{ culture.name }}</h3>
              </div>
            </div>
            <div class="culture-info">
              <h3 class="culture-name">{{ culture.name }}</h3>
              <p class="culture-description">{{ culture.description }}</p>
              <div class="culture-history" v-if="culture.history">
                <p class="history-text">{{ culture.history }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    
    <!-- 旅游攻略推荐 -->
    <section class="travel-guide-section">
      <div class="container">
        <div class="section-header">
          <h2 class="section-title">📝 旅游攻略</h2>
        </div>
        
        <div class="guide-cards">
          <div class="guide-card">
            <div class="guide-icon">🗓️</div>
            <h3 class="guide-title">最佳旅游时间</h3>
            <p class="guide-content">
              威海的最佳旅游季节是春季（4-5月）和秋季（9-10月），气候宜人，景色优美。夏季可以享受海滨浴场的清凉，冬季则可以体验温泉和雪景。
            </p>
          </div>
          
          <div class="guide-card">
            <div class="guide-icon">🚗</div>
            <h3 class="guide-title">交通指南</h3>
            <p class="guide-content">
              威海市内交通便利，有公交车、出租车和共享单车。建议游客可以租车自驾，这样可以更方便地游览各个景点，尤其是距离市区较远的成山头等景区。
            </p>
          </div>
          
          <div class="guide-card">
            <div class="guide-icon">🏨</div>
            <h3 class="guide-title">住宿推荐</h3>
            <p class="guide-content">
              威海市区有各类酒店和民宿可供选择。推荐住在环翠区，可以方便地前往各个景点。海边的海景房也是不错的选择，可以欣赏美丽的海景。
            </p>
          </div>
        </div>
      </div>
    </section>
    
    <!-- 联系我们区域 -->
    <section class="contact-section">
      <div class="container">
        <div class="contact-content">
          <div class="contact-info">
            <h2 class="contact-title">💬 联系我们</h2>
            <p class="contact-text">
              如果您有任何问题或建议，欢迎随时联系我们。我们的客服团队将竭诚为您服务，帮助您规划完美的威海之旅。
            </p>
            <div class="contact-details">
              <div class="contact-item">
                <span class="contact-icon">✉️</span>
                <a href="mailto:info@weihaitour.com" class="contact-link">info@weihaitour.com</a>
              </div>
              <div class="contact-item">
                <span class="contact-icon">📞</span>
                <a href="tel:06311234567" class="contact-link">0631-1234567</a>
              </div>
              <div class="contact-item">
                <span class="contact-icon">📍</span>
                <span class="contact-address">山东省威海市环翠区新威路1号</span>
              </div>
            </div>
          </div>
          
          <div class="contact-form">
            <h3 class="form-title">在线咨询</h3>
            <form @submit.prevent="alert('咨询已提交，我们将尽快回复您！')">
              <div class="form-group">
                <label for="name" class="form-label">姓名</label>
                <input type="text" id="name" class="form-control" placeholder="请输入您的姓名" required>
              </div>
              <div class="form-group">
                <label for="email" class="form-label">邮箱</label>
                <input type="email" id="email" class="form-control" placeholder="请输入您的邮箱" required>
              </div>
              <div class="form-group">
                <label for="phone" class="form-label">电话</label>
                <input type="tel" id="phone" class="form-control" placeholder="请输入您的电话">
              </div>
              <div class="form-group">
                <label for="message" class="form-label">留言内容</label>
                <textarea 
                  id="message" 
                  class="form-control" 
                  rows="4" 
                  placeholder="请输入您的留言内容" 
                  required
                ></textarea>
              </div>
              <button type="submit" class="submit-btn btn-primary">
                提交咨询
              </button>
            </form>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<style scoped>
.home-page {
  width: 100%;
}

/* 轮播图样式增强 */
.carousel-section {
  width: 100%;
  position: relative;
}

.carousel-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.carousel-btn {
  background-color: var(--accent-color);
  color: white;
  border: none;
  padding: 12px 30px;
  border-radius: 30px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition);
  margin-top: 15px;
}

.carousel-btn:hover {
  background-color: #f57c00;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 152, 0, 0.3);
}

/* 搜索区域样式 */
.search-section {
  background-color: var(--background-primary);
  padding: 20px 0;
  box-shadow: var(--shadow-sm);
}

.search-box {
  max-width: 800px;
  margin: 0 auto;
}

.search-input-wrapper {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
}

.search-input {
  flex: 1;
  padding: 12px 20px;
  border: 2px solid var(--ocean-light);
  border-radius: 30px;
  font-size: 16px;
  transition: var(--transition);
}

.search-input:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(30, 136, 229, 0.1);
}

.search-btn {
  background-color: var(--primary-color);
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 30px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition);
}

.search-btn:hover {
  background-color: var(--primary-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.search-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.search-tag {
  padding: 6px 16px;
  background-color: var(--ocean-light);
  color: var(--ocean-dark);
  border-radius: 20px;
  font-size: 14px;
  cursor: pointer;
  transition: var(--transition);
}

.search-tag:hover {
  background-color: var(--ocean-medium);
  transform: translateY(-1px);
}

/* 通用区域标题样式 */
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
  padding-bottom: 15px;
  border-bottom: 2px solid var(--ocean-light);
}

.section-title {
  font-size: 2rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.view-more-btn {
  background-color: transparent;
  color: var(--primary-color);
  border: 2px solid var(--primary-color);
  padding: 8px 20px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition);
}

.view-more-btn:hover {
  background-color: var(--primary-color);
  color: white;
}

/* 城市介绍区域 */
.city-intro-section {
  padding: 60px 0;
  background-color: var(--background-primary);
}

.city-intro-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  align-items: center;
}

.intro-paragraph {
  margin-bottom: 20px;
  font-size: 16px;
  line-height: 1.8;
}

.city-intro-images {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
}

.intro-image-wrapper {
  overflow: hidden;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-md);
}

.intro-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.intro-image-wrapper:hover .intro-image {
  transform: scale(1.05);
}

/* 热门景点区域 */
.attractions-section {
  padding: 60px 0;
  background-color: var(--background-secondary);
}

.attraction-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 30px;
}

.category-btn {
  padding: 8px 20px;
  background-color: var(--background-primary);
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  font-size: 14px;
  cursor: pointer;
  transition: var(--transition);
}

.category-btn:hover {
  border-color: var(--primary-color);
  color: var(--primary-color);
}

.category-btn.active {
  background-color: var(--primary-color);
  color: white;
  border-color: var(--primary-color);
}

.attractions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 30px;
}

.attraction-card {
  background-color: var(--background-primary);
  border-radius: var(--border-radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
  cursor: pointer;
}

.attraction-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-5px);
}

.attraction-image-wrapper {
  width: 100%;
  height: 220px;
  overflow: hidden;
  position: relative;
}

.attraction-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.attraction-info {
  padding: 20px;
}

.attraction-header {
  margin-bottom: 15px;
}

.attraction-name {
  font-size: 1.3rem;
  font-weight: 600;
  margin-bottom: 10px;
  color: var(--text-primary);
}

.attraction-tags {
  display: flex;
  gap: 8px;
}

.attraction-description {
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-secondary);
  margin-bottom: 20px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.attraction-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.attraction-price {
  font-size: 16px;
  font-weight: 500;
}

.price-label {
  color: var(--text-secondary);
}

.price-value {
  color: var(--accent-color);
  font-weight: 600;
}

.view-detail-btn {
  background-color: transparent;
  color: var(--primary-color);
  border: none;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition);
}

.view-detail-btn:hover {
  color: var(--primary-dark);
  text-decoration: underline;
}

/* 特色美食区域 */
.food-section {
  padding: 60px 0;
  background-color: var(--background-primary);
}

.food-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 30px;
}

.food-card {
  background-color: var(--background-secondary);
  border-radius: var(--border-radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}

.food-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

.food-image-wrapper {
  width: 100%;
  height: 200px;
  overflow: hidden;
  position: relative;
}

.food-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.food-info {
  padding: 20px;
}

.food-name {
  font-size: 1.3rem;
  font-weight: 600;
  margin-bottom: 10px;
  color: var(--text-primary);
}

.food-description {
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-secondary);
  margin-bottom: 15px;
}

.food-recommended {
  font-size: 14px;
  color: var(--text-secondary);
}

.recommended-label {
  font-weight: 500;
  color: var(--text-primary);
}

.recommended-item {
  color: var(--ocean-dark);
}

/* 文化体验区域 */
.culture-section {
  padding: 60px 0;
  background-color: var(--background-secondary);
}

.culture-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 30px;
}

.culture-card {
  background-color: var(--background-primary);
  border-radius: var(--border-radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}

.culture-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

.culture-image-wrapper {
  width: 100%;
  height: 200px;
  overflow: hidden;
  position: relative;
}

.culture-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.culture-info {
  padding: 20px;
}

.culture-name {
  font-size: 1.3rem;
  font-weight: 600;
  margin-bottom: 10px;
  color: var(--text-primary);
}

.culture-description {
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-secondary);
  margin-bottom: 15px;
}

.culture-history {
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-secondary);
}

/* 旅游攻略区域 */
.travel-guide-section {
  padding: 60px 0;
  background-color: var(--primary-color);
  color: white;
}

.travel-guide-section .section-title {
  color: white;
}

.guide-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
}

.guide-card {
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: var(--border-radius);
  padding: 30px;
  backdrop-filter: blur(10px);
  transition: var(--transition);
}

.guide-card:hover {
  background-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-5px);
}

.guide-icon {
  font-size: 2.5rem;
  margin-bottom: 20px;
}

.guide-title {
  font-size: 1.3rem;
  font-weight: 600;
  margin-bottom: 15px;
  color: white;
}

.guide-content {
  font-size: 14px;
  line-height: 1.7;
  color: var(--ocean-light);
  margin: 0;
}

/* 联系我们区域 */
.contact-section {
  padding: 60px 0;
  background-color: var(--background-primary);
}

.contact-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}

.contact-info {
  padding: 30px;
  background-color: var(--background-secondary);
  border-radius: var(--border-radius);
}

.contact-title {
  font-size: 2rem;
  font-weight: 600;
  margin-bottom: 20px;
  color: var(--text-primary);
}

.contact-text {
  font-size: 16px;
  line-height: 1.8;
  color: var(--text-secondary);
  margin-bottom: 30px;
}

.contact-details {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.contact-details .contact-item {
  display: flex;
  align-items: center;
  gap: 15px;
}

.contact-details .contact-icon {
  font-size: 1.5rem;
  color: var(--primary-color);
  min-width: 30px;
}

.contact-details .contact-link {
  font-size: 16px;
  color: var(--text-primary);
  text-decoration: none;
}

.contact-details .contact-link:hover {
  color: var(--primary-color);
  text-decoration: underline;
}

.contact-address {
  font-size: 16px;
  color: var(--text-primary);
}

.contact-form {
  padding: 30px;
  background-color: var(--background-secondary);
  border-radius: var(--border-radius);
}

.form-title {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 25px;
  color: var(--text-primary);
}

.submit-btn {
  width: 100%;
  padding: 12px;
  font-size: 16px;
  font-weight: 500;
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .attractions-grid, .food-grid, .culture-grid, .guide-cards {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  }
  
  .city-intro-content {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  
  .city-intro-images {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .search-input-wrapper {
    flex-direction: column;
  }
  
  .search-btn {
    width: 100%;
  }
  
  .section-header {
    flex-direction: column;
    gap: 15px;
    align-items: flex-start;
  }
  
  .section-title {
    font-size: 1.8rem;
  }
  
  .view-more-btn {
    align-self: flex-end;
  }
  
  .city-intro-images {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .intro-image {
    height: 180px;
  }
  
  .attractions-grid, .food-grid, .culture-grid, .guide-cards {
    grid-template-columns: 1fr;
    gap: 25px;
  }
  
  .attraction-image-wrapper, .food-image-wrapper, .culture-image-wrapper {
    height: 200px;
  }
  
  .contact-content {
    grid-template-columns: 1fr;
    gap: 30px;
  }
}

@media (max-width: 480px) {
  .carousel-caption h3 {
    font-size: 1.5rem;
  }
  
  .carousel-caption p {
    font-size: 0.9rem;
  }
  
  .carousel-btn {
    padding: 10px 20px;
    font-size: 14px;
  }
  
  .section-title {
    font-size: 1.5rem;
  }
  
  .city-intro-images {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  
  .intro-image {
    height: 150px;
  }
  
  .attraction-info, .food-info, .culture-info {
    padding: 15px;
  }
  
  .contact-info, .contact-form {
    padding: 20px;
  }
  
  .guide-card {
    padding: 20px;
  }
  
  .guide-icon {
    font-size: 2rem;
  }
}

/* 动画效果 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.section-header {
  animation: fadeInUp 0.6s ease-out;
}

.attraction-card, .food-card, .culture-card, .guide-card {
  animation: fadeInUp 0.6s ease-out;
  animation-fill-mode: both;
}

.attraction-card:nth-child(1), .food-card:nth-child(1), .culture-card:nth-child(1), .guide-card:nth-child(1) {
  animation-delay: 0.1s;
}

.attraction-card:nth-child(2), .food-card:nth-child(2), .culture-card:nth-child(2), .guide-card:nth-child(2) {
  animation-delay: 0.2s;
}

.attraction-card:nth-child(3), .food-card:nth-child(3), .culture-card:nth-child(3), .guide-card:nth-child(3) {
  animation-delay: 0.3s;
}

.attraction-card:nth-child(4), .food-card:nth-child(4), .culture-card:nth-child(4) {
  animation-delay: 0.4s;
}
</style>